<template>
  <div class="demo-container">
    <h2>3D标签云演示</h2>
    
    <div class="demo-controls">
      <el-switch v-model="autoRotate" label="自动旋转" />
      <el-slider v-model="rotateSpeed" :min="0" :max="2" :step="0.1" label="旋转速度" />
      <el-slider v-model="radius" :min="50" :max="200" label="半径" />
    </div>
    
    <TagCloud3D 
      :tags="demoTags"
      :radius="radius"
      :auto-rotate="autoRotate"
      :rotate-speed="rotateSpeed"
      @tag-click="handleTagClick"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import TagCloud3D from '../components/TagCloud3D.vue';

// 演示数据
const demoTags = ref([
  {id: 1, name: "算法", count: 15},
  {id: 2, name: "Go语言", count: 8},
  {id: 3, name: "前端开发", count: 12},
  {id: 4, name: "数据库", count: 6},
  {id: 5, name: "云计算", count: 9},
  {id: 6, name: "微服务", count: 11},
  {id: 7, name: "容器", count: 7},
  {id: 8, name: "人工智能", count: 14},
  {id: 9, name: "Java", count: 10},
  {id: 10, name: "Python", count: 13},
  {id: 11, name: "React", count: 8},
  {id: 12, name: "Vue", count: 9},
  {id: 13, name: "TypeScript", count: 11},
  {id: 14, name: "Node.js", count: 10},
  {id: 15, name: "区块链", count: 7}
]);

// 控制参数
const autoRotate = ref(true);
const rotateSpeed = ref(0.3);
const radius = ref(120);

// 处理标签点击
const handleTagClick = (tag) => {
  console.log('点击标签:', tag);
  // 这里可以添加点击标签后的处理逻辑
};
</script>

<style scoped>
.demo-container {
  padding: 20px;
  text-align: center;
}

.demo-controls {
  margin-bottom: 20px;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 8px;
  display: inline-block;
}

.demo-controls > * {
  margin: 10px;
}
</style>